<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>User List</title>

    <style>
        body {
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }

        h1 {
            text-align: center;
            color: #333;
            padding: 20px;
        }

        table {
            width: 100%;
            margin: 20px auto;
            background-color: #fff;
            border-collapse: collapse;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
            color: #333;
        }

        tr:hover {
            background-color: #f2f2f2;
        }

        .actions {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .actions a {
            margin: 0 5px;
            padding: 5px 10px;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
        }

        .delete {
            background-color: #ff3333;
        }

        .edit {
            background-color: #0099cc;
        }

        .disable {
            background-color: #999999;
        }

        tfoot {
            text-align: center;
            width: 100%;
            text-align: center;
        }

        tfoot a {
            text-decoration: none;
            margin: 5px 10px;
            color: #007bff;
        }

        tfoot a:hover {
            text-decoration: underline;
            color: #209a22;
        }

        tfoot a:visited {
            color: #007bff;
        }

        tfoot a.current_page {
            color: black;
        }

        tfoot a.current_page:hover {
            color: black;
            text-decoration: none;
        }
        .search-form {
            display: flex; margin-bottom: 20px;
        }
        .search-form input {
            padding: 5px 10px;
            border-radius: 4px 0 0 4px;
            border: 1px solid #ddd;
        }
        .search-form button {
            padding: 5px 15px;
            border-radius: 0 4px 4px 0;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }

    </style>
    <script th:inline="javascript">
        /* 将"message"属性传递给JavaScript变量 */
        var message = [[${message}]];

        /* 使用JavaScript弹窗输出 */
        if (message != null) {
            alert(message);
        }
    </script>
</head>
<body>
<form class="search-form" action="/selectAllUser" method="get">
    <input type="text" name="name" th:value="${searchUser.name}" placeholder="请输入昵称"><br>
    <input type="text" name="role" th:value="${searchUser.role}" placeholder="请输入权限(user/admin)"><br>
    <button type="submit">搜索</button>
</form>
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>昵称</th>
        <th>身份</th>
        <th>账号状态</th>
        <th>用户邮箱</th>
        <th>注册时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user ,status : ${userList.data}">
        <td th:text="${status.index + 1}"></td>
        <td th:text="${user.username}">John</td>
        <td th:text="${user.name}">john@example.com</td>
        <td th:text="${user.role}">john@example.com</td>
        <td th:text="${user.status == '1' ? '正常' : user.status == '0' ? '未激活' : '未知状态'}"></td>
        <td th:text="${user.email}">john@example.com</td>
        <td th:text="${user.createTime}">john@example.com</td>
        <td class="actions">
            <a th:href="@{'/delete/'+${user.id}}" class="delete">删除</a>
            <a th:href="@{'/update/'+${user.id}}" class="edit">修改</a>
            <p th:if="${user.status == '1'}">
                <a th:href="@{'/disable/'+${user.id}}" class="disable">禁用</a>
            </p>
            <p th:if="${user.status == '0'}">
                <a style="background-color: #099f27" th:href="@{'/disable/'+${user.id}}" class="disable">激活</a>
            </p>
        </td>
    </tr>
    </tbody>

        <tfoot th:if="${userList.data.size()>0 and userList.totalPage>1}">
        <tr>
            <th colspan="10">
        <span th:if="${userList.hasPrePage}">
            <a th:href="@{/selectAllUser(p=${userList.prePage},s=${userList.pageSize},name=${searchUser.name},role=${searchUser.role})}">上一页</a>
        </span>

                <span th:if="!${userList.hasPrePage}">
            上一页
        </span>
                <!--     循环页码   -->
                <span th:each="num : ${userList.pageNumbers}">
           <a th:if="${num == userList.pageNum}" th:text="${num}" class="current_page"></a>
           <a th:if="${num != userList.pageNum}" th:href="@{/selectAllUser(p=${num},s=${userList.pageSize},name=${searchUser.name},role=${searchUser.role})}"
              th:text="${num}"></a>
        </span>

                <span th:if="${userList.hasNextPage}">
            <a th:href="@{/selectAllUser(p=${userList.nextPage},s=${userList.pageSize},name=${searchUser.name},role=${searchUser.role})}">下一页</a>
        </span>

                <span th:if="!${userList.hasNextPage}">
            下一页
        </span>
            </th>
        </tr>
        </tfoot>
</table>
</body>
</html>